<template>
  <div class="diagonal-square">
    <div class="content left">
      <slot name="left"></slot>
    </div>
    <div class="content right">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<style scoped>
.diagonal-square {
  position: relative;
  width: 100%;
  height: 100%;
  --color-core: currentColor;
}

.diagonal-square::before {
  content: "";
  position: absolute;
  top: 12.5%;
  left: 12.5%;
  width: 75%;
  height: 75%;
  background: linear-gradient(
    to top left,
    transparent 49%,
    var(--color-core) 49%,
    var(--color-core) 51%,
    transparent 51%
  );
  z-index: 3; /* 确保在线条层级最高 */
  pointer-events: none; /* 防止遮挡交互 */
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
  --addon: 4%;
}

.left {
  clip-path: polygon(0 0, 100% 0, calc(50% - var(--addon)) calc(50% - var(--addon)), 0 100%);
  z-index: 1;
}

.right {
  clip-path: polygon(100% 100%, 0 100%, calc(50% + var(--addon)) calc(50% + var(--addon)), 100% 0);
  z-index: 1;
}
</style>
